<template>
  <div class="home-container">
    <TarBarCom></TarBarCom>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <HeaderTarBar></HeaderTarBar>
      <BannerCom :images="bannerList"></BannerCom>

      <van-list :immediate-check="false" v-model="loading" offset="0" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="recommend-container" ref="home">
          <h2>每日推荐</h2>
          <DailyRecommendation v-for="item in recommendList" :key="item.id" :recommendInfo="item" :image="item.image" :likeNum="item.likeNum" :collectionNum="item.collectionNum" :title="item.title" :desc="item.desc" :userImage="item.userImage" :userName="item.userNick"></DailyRecommendation>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import TarBarCom from '@/components/home-view/TarBarCom'
import HeaderTarBar from '@/components/home-view/HeaderTarBar'
import BannerCom from '@/components/home-view/BannerCom'
import DailyRecommendation from '@/components/home-view/DailyRecommendation'
import request from '@/utils/request/request'
export default {
  name: 'heme-view',
  components: {
    TarBarCom,
    HeaderTarBar,
    BannerCom,
    DailyRecommendation
  },
  data() {
    return {
      top: 0,
      bannerList: [],
      idList: [],
      index: 0,
      recommendList: [],
      isLoading: false,
      loading: false,
      finished: false
    }
  },
  methods: {
    //下拉刷新
    onRefresh() {
      this.bannerList = []
      this.recommendList = []
      this.requestBanner()
    },
    //滚动加载
    async onLoad() {
      this.requestDailyRecommend()
      // 是否已经加载完所有数据
      if (this.recommendList.length > this.idList.length) {
        this.finished = true
      }
    },
    // 请求轮播图和首页数据id
    async requestBanner() {
      const toast = this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      const {
        data: { data: res }
      } = await request.get('/public/getSecondaryHomeData.shtml')
      toast.clear()
      res.bannerlist.forEach((img) => {
        let id = img.url.split('=')
        this.bannerList.push({ imgUrl: `http://pic.angelboy.cn/web/${img.imageid}.jpg`, id: id[1] })
      })
      this.idList = res.idList
      this.requestDailyRecommend()
    },
    // 请求每日推荐十条数据
    async requestDailyRecommend() {
      /*
      请求接口：/public/getDifferentdataList.shtml
      请求方式：post
      请求参数：{
        ids：82219,82218,82217,82216,82215,82214,82213,82212,82202,82201
      }
      */
      let ids = []
      for (let i = this.index; i < 10 + this.index; i++) {
        ids.push(this.idList[i])
      }
      this.index += 10
      const {
        data: { list: res }
      } = await request({
        url: '/public/getDifferentdataList.shtml',
        method: 'post',
        data: {
          ids: ids.join(',')
        }
      })
      res.forEach((item) => {
        this.recommendList.push(item)
      })
      //当前已经加载完成
      this.isLoading = false
      this.loading = false
    }
  },
  created() {
    if (sessionStorage.getItem('home-data')) {
      let homeData = JSON.parse(sessionStorage.getItem('home-data'))
      this.index = homeData.index
      this.idList = homeData.idList
      this.bannerList = homeData.bannerList
      this.recommendList = homeData.recommendList
      this.top = homeData.top
      return
    }
    this.requestBanner()
  },
  mounted() {
    window.scrollTo(0, this.top)
    document.addEventListener('scroll', () => {
      this.top = window.pageYOffset
    })
    window.addEventListener('beforeunload', () => {
      sessionStorage.removeItem('home-data')
    })
  },
  beforeDestroy() {
    // 需要保存的数据
    let obj = {
      top: this.top,
      index: this.index,
      idList: this.idList,
      bannerList: this.bannerList,
      recommendList: this.recommendList
    }
    sessionStorage.setItem('home-data', JSON.stringify(obj))
  }
}
</script>

<style lang="less" scoped>
.home-container {
  box-sizing: border-box;
  padding-top: 46px;

  .recommend-container {
    padding: 20px 10px 0;

    h2 {
      font-size: 20px;
      color: #888;
      padding-bottom: 10px;
      font-weight: 500;
    }
  }
}
</style>
